import { FC } from "react";
import styled from "styled-components";
import { Button, Card, ConfigProvider, Space, Tag, Popconfirm, message } from "antd";
import {
  StarFilled,
  EditOutlined,
  LineChartOutlined,
  DeleteOutlined,
  StarOutlined,
  CopyOutlined,
} from "@ant-design/icons";
import { Link } from "react-router-dom";
const YCard = styled(Card)`
  margin-bottom: 20px;
  .ant-card-head {
    background-color: #fff;
    min-height: 0;
    height: auto;
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .ant-card-body {
    padding: 10px 0px;
    ._list_item_1jabo_1 {
      border: none;
      padding-top: 0;
      padding-bottom: 0;
      margin-bottom: 0;
    }
  }
`;
const CardContent = styled.div`
  display: flex;
  justify-content: space-between;
`;
type PropsType = {
  id: string;
  title: string;
  isPublished: boolean;
  isStar: boolean;
  answerCount: number;
  createAt: string;
  delQuestion: (id: string) => void;
  publishQuestion: (id: string) => void;
};
const QuestionCard: FC<PropsType> = (props) => {
  const { id, title, isPublished, delQuestion, isStar, answerCount, createAt } = props;
  const [messageApi, contextHolder] = message.useMessage();
  const del = () => {
    messageApi.success("删除成功");
    delQuestion(id);
  };
  const confirm = () => {
    messageApi.success("复制成功");
  };
  return (
    <YCard
      type="inner"
      title={
        <Link to={isPublished ? `/questionnaire/stat?id=${id}` : `/questionnaire/edit/${id}`}>
          <Space>
            {isPublished ? <StarFilled style={{ color: "red" }} /> : ""}
            {title}
          </Space>
        </Link>
      }
      extra={
        <>
          <Space>
            <ConfigProvider wave={{ disabled: true }}>
              <Tag color={isPublished ? "success" : "orange"}>
                {isPublished ? "已发布" : "未发布"}
              </Tag>
            </ConfigProvider>
            <span>答卷：{answerCount}</span>
            <span>{createAt}</span>
          </Space>
        </>
      }>
      <CardContent>
        <div className="left">
          <Button type="link" icon={<EditOutlined />}>
            编辑问卷
          </Button>
          <Button type="link" icon={<LineChartOutlined />}>
            数据统计
          </Button>
        </div>
        <div className="right">
          <Button type="link" icon={isStar ? <StarFilled /> : <StarOutlined />}>
            {isStar ? "取消标星" : "标星"}
          </Button>
          {contextHolder}
          <Popconfirm title="是否要复制此问卷?" onConfirm={confirm}>
            <Button type="link" icon={<CopyOutlined />}>
              复制
            </Button>
          </Popconfirm>
          <Popconfirm title="是否要删除此问卷?" onConfirm={del}>
            <Button type="link" icon={<DeleteOutlined />}>
              删除
            </Button>
          </Popconfirm>
        </div>
      </CardContent>
    </YCard>
  );
};
export default QuestionCard;
